<template>
  <div class="create-form">
    <el-steps :active="active" finish-status="success">
      <el-step title="提交店铺信息"></el-step>
      <el-step title="提交店铺材料"></el-step>
      <el-step title="提交实名信息"></el-step>
      <el-step title="完成创建"></el-step>
    </el-steps>

    <div class="form-content">
      <div v-if="active === 0">
        <el-form ref="step1Form">
          <el-form-item label="店铺名称" required>
            <el-input v-model="info.shopName" placeholder="请输入店铺名称"></el-input>
          </el-form-item>
          <el-form-item label="店铺地址" required>
            <el-input v-model="info.shopAddress" placeholder="请输入店铺地址"></el-input>
          </el-form-item>
          <el-form-item label="经营类别" required>
            <el-select v-model="info.shopCategory" placeholder="请选择经营类别">
              <el-option label="餐饮" value="food"></el-option>
              <el-option label="服装" value="clothing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="开始营业时间" required>
            <el-time-picker
              v-model="info.shopStart"
              placeholder="选择开始营业时间"
              format="HH:mm"
              value-format="HH:mm">
            </el-time-picker>
          </el-form-item>
          <el-form-item label="结束营业时间" required>
            <el-time-picker
              v-model="info.shopEnd"
              placeholder="选择结束营业时间"
              format="HH:mm"
              value-format="HH:mm">
            </el-time-picker>
          </el-form-item>
          <el-form-item label="店铺头像" required>
            <el-upload
              action="#"
              list-type="picture-card"
              :limit="1"
              :auto-upload="false"
              :on-change="(file, fileList) => uploadHandle(file, fileList, 'shopCover')"
              :on-remove="(file, fileList) => handleRemove(file, fileList, 'shopCover')"
              :on-exceed="exceedHandle"
              :file-list="shopCoverFileList"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
      <div v-else-if="active === 1">
        <el-form ref="step2Form">
          <div class="upload-group">
            <el-form-item label="营业执照" required>
              <el-upload
                action="#"
                list-type="picture-card"
                :limit="1"
                :auto-upload="false"
                :on-change="(file, fileList) => uploadHandle(file, fileList, 'businessLicense')"
                :on-remove="(file, fileList) => handleRemove(file, fileList, 'businessLicense')"
                :on-exceed="exceedHandle"
                :file-list="businessLicenseFileList"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="食品安全许可证" required>
              <el-upload
                action="#"
                list-type="picture-card"
                :limit="1"
                :auto-upload="false"
                :on-change="(file, fileList) => uploadHandle(file, fileList, 'foodSafetyLicense')"
                :on-remove="(file, fileList) => handleRemove(file, fileList, 'foodSafetyLicense')"
                :on-exceed="exceedHandle"
                :file-list="foodSafetyLicenseFileList"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="店铺照片" required>
              <el-upload
                action="#"
                list-type="picture-card"
                :limit="1"
                :auto-upload="false"
                :on-change="(file, fileList) => uploadHandle(file, fileList, 'shopPhoto')"
                :on-remove="(file, fileList) => handleRemove(file, fileList, 'shopPhoto')"
                :on-exceed="exceedHandle"
                :file-list="shopPhotoFileList"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div v-else-if="active === 2">
        <el-form ref="step3Form">
          <el-form-item label="身份证" required>
            <el-upload
              action="#"
              list-type="picture-card"
              :limit="1"
              :auto-upload="false"
              :on-change="(file, fileList) => uploadHandle(file, fileList, 'idCard')"
              :on-remove="(file, fileList) => handleRemove(file, fileList, 'idCard')"
              :on-exceed="exceedHandle"
              :file-list="idCardFileList"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="button-group">
      <el-button @click="prev" :disabled="active === 0">上一步</el-button>
      <el-button v-if="active === 2" @click="submitHandle">提交</el-button>
      <el-button v-else @click="next">下一步</el-button>
    </div>
  </div>
</template>

<script>
import { addShopInfo } from '@/api/shop/shopInfo';

export default {
  data() {
    return {
      active: 0,
      shopCoverFileList: [],
      businessLicenseFileList: [],
      foodSafetyLicenseFileList: [],
      shopPhotoFileList: [],
      idCardFileList: [],
      info: {
        businessId: '',
        shopName: '',
        shopAddress: '',
        shopCategory: '',
        shopStart: '',
        shopEnd: '',
      }
    };
  },

  methods: {
    submitHandle() {
      if (!this.isFormValid) {
        this.$message.warning('请填写完所有信息');
        return;
      }

      const formData = new FormData();
      formData.append("businessId", this.info.businessId);
      formData.append("shopName", this.info.shopName);
      formData.append("shopAddress", this.info.shopAddress);
      formData.append("shopCategory", this.info.shopCategory);
      formData.append("shopStart", this.info.shopStart);
      formData.append("shopEnd", this.info.shopEnd);
      if (this.shopCoverFileList.length > 0) {
        formData.append("shopAvatar", this.shopCoverFileList[0].raw);
      }
      if (this.businessLicenseFileList.length > 0) {
        formData.append("shopLicense", this.businessLicenseFileList[0].raw);
      }
      if (this.foodSafetyLicenseFileList.length > 0) {
        formData.append("foodSafe", this.foodSafetyLicenseFileList[0].raw);
      }
      if (this.shopPhotoFileList.length > 0) {
        formData.append("shopImage", this.shopPhotoFileList[0].raw);
      }
      if (this.idCardFileList.length > 0) {
        formData.append("idCard", this.idCardFileList[0].raw);
      }

      addShopInfo(formData).then(res => {
        console.log(res);
      });
    },

    next() {
      if (this.active < 2) {
        this.active++;
      }
    },
    prev() {
      if (this.active > 0) {
        this.active--;
      }
    },
    uploadHandle(file, fileList, uploadType) {
      // 根据当前步骤更新对应的文件列表
      if (uploadType === 'shopCover') {
        this.shopCoverFileList = fileList;
      } else if (uploadType === 'businessLicense') {
        this.businessLicenseFileList = fileList;
      } else if (uploadType === 'foodSafetyLicense') {
        this.foodSafetyLicenseFileList = fileList;
      } else if (uploadType === 'shopPhoto') {
        this.shopPhotoFileList = fileList;
      } else if (uploadType === 'idCard') { // 新增身份证上传处理
        this.idCardFileList = fileList;
      }
    },
    handleRemove(file, fileList, uploadType) {
      // 根据当前步骤更新对应的文件列表
      if (uploadType === 'shopCover') {
        this.shopCoverFileList = fileList;
      } else if (uploadType === 'businessLicense') {
        this.businessLicenseFileList = fileList;
      } else if (uploadType === 'foodSafetyLicense') {
        this.foodSafetyLicenseFileList = fileList;
      } else if (uploadType === 'shopPhoto') {
        this.shopPhotoFileList = fileList;
      } else if (uploadType === 'idCard') {
        this.idCardFileList = fileList;
      }
    },
    exceedHandle() {
      this.$message.warning('只能上传一张图片');
    }
  },

  computed: {
    isFormValid() {
      if (this.active === 0) {
        return !!this.info.shopName && !!this.info.shopAddress && !!this.info.shopCategory && !!this.info.shopStart && !!this.info.shopEnd && this.shopCoverFileList.length > 0;
      } else if (this.active === 1) {
        return this.businessLicenseFileList.length > 0 && this.foodSafetyLicenseFileList.length > 0 && this.shopPhotoFileList.length > 0;
      } else if (this.active === 2) {
        return this.idCardFileList.length > 0;
      }
      return true;
    }
  }
};
</script>

<style>
.create-form {
  width: 600px;
  margin: 50px auto;
}
.form-content {
  margin-top: 20px;
}
.upload-group {
  display: flex;
  flex-wrap: wrap;
}
.upload-group .el-form-item {
  width: 30%;
  margin-right: 1%;
  margin-bottom: 20px;
}
.upload-group .el-form-item:last-child {
  margin-right: 0;
}
.button-group {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
</style>